<template>
  <div class="components-input-demo-presuffix">
    <a-input @click="openModal" :placeholder="placeholder || $t('m.common.label.option_select')" v-model="names" readOnly>
      <ych-icon slot="prefix" type="appstore" :title="$t('m.common.label.option_select')"/>
      <ych-icon v-if="value" slot="suffix" type="close-circle" @click="handleEmpty" :title="$t('m.common.button.clear')"/>
    </a-input>

    <select-variable-dialog ref="selectVariableDialog" @selectFinished="handleOK"></select-variable-dialog>
  </div>
</template>

<script>

import SelectVariableDialog from './SelectVariableDialog'

export default {
  name: 'variableTag',
  components: {
    SelectVariableDialog
  },
  props: {
    placeholder: {
      type: String,
    },
    value: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      names: ''
    }
  },
  watch: {
    value: {
      handler() {
        this.initNames()
      },
      immediate: true
    }
  },
  methods: {
    initNames() {
      this.names = this.value || ''
    },
    openModal() {
      // 设计器提供
      const variables = window.bpmGetVariables()
      const formCode = window.bpmGetFormCode()
      this.$refs.selectVariableDialog.open(variables, formCode)
    },
    handleOK(value, alias) {
      this.$emit('change', value)
      this.$emit('selected', alias)
    },
    handleEmpty() {
      this.handleOK()
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style lang="less" scoped>
.components-input-demo-presuffix .anticon-close-circle {
  cursor: pointer;
  color: #ccc;
  transition: color 0.3s;
  font-size: 12px;
}

.components-input-demo-presuffix .anticon-close-circle:hover {
  color: #f5222d;
}

.components-input-demo-presuffix .anticon-close-circle:active {
  color: #666;
}
</style>
